<html>
    <head>
        <title>Photo Album</title>

		<!-- 		jQuery and Booklet scripts         -->
		<script src="booklet/jquery-1.5.min.js" type="text/javascript"></script>
		<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
		<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>

		<!-- 		Cufon font scripts -->
		<script src="cufon/cufon-yui.js" type="text/javascript"></script>
		<script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>
		<script src="cufon/Note_this_400.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('h1,h2,p,.b-counter');
			Cufon.replace('.book_wrapper a', {hover:true});
			Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
			Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
			Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
		</script>
		
		<!-- 		CSS -->
		<link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet"/>
		<link href="css/style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
		<div class="book_wrapper">
			<a id="next_page_button"></a>
			<a id="prev_page_button"></a>
			<div id="loading" class="loading">Loading pages...</div>
			<div id="mybook" style="display:none;">
				<div class="b-load">
<!-- Cover Page -->
					<div>
						<h2 class="cover">SPARKLES</h2>
						<img class="cover" src="sparkles/cover.jpg" alt=""/>
						<h2 class="cover">My Story</h2>
					</div>
<!-- Story Section -->					
					<div>
						<img src="sparkles/1.jpg" alt=""/>
						<p id="intro"/>
					</div>
					<div>
						<img src="sparkles/2.jpg" alt=""/>
						<p>Since young, I have been living with my pretty mama. 
						See how tiny I was. Cute right?</p>
					</div>
					<div>
						<img src="sparkles/3.jpg" alt=""/>
						<p>I like to spend time with my mama. I will cuddle up 
						to her all the time.</p>
					</div>
					<div>
						<img src="sparkles/4.jpg" alt=""/>
						<p>Or have a kissing moment together. Mama's lips are 
						very soft and sweet!</p>
					</div>
					<div>
						<img src="sparkles/5.jpg" alt=""/>
						<p>Sometimes mama like to take pictures of me.</p>
					</div>
					<div>
						<img src="sparkles/6.jpg" alt=""/>
						<p>Mama likes to dress me up too.</p>
					</div>
					<div>
						<img src="sparkles/6a.jpg" alt=""/>
						<p>Or put me inside funny bags....</p>
					</div>
					<div>
						<img src="sparkles/7.jpg" alt=""/>
						<p>And more dressing up......*Grrr</p>
					</div>
					<div>
						<img src="sparkles/8.jpg" alt=""/>
						<p>Sometimes I also don't know what is it for. *Sigh</p>
					</div>
					<div>
						<img src="sparkles/9.jpg" alt=""/>
						<p>There are times when mama do not have time for me. 
						So I will have to self-entertain.</p>
					</div>
					<div>
						<img src="sparkles/10.jpg" alt=""/>
						<p>I will play with my toys. I have soooooooo many toys.
						 Hee Hee.</p>
					</div>
					<div>
						<img src="sparkles/11.jpg" alt=""/>
						<p>Mama will buy toys for me when she visits the pet 
						store and even when she comes back from travelling.</p>
					</div>
					<div>
						<img src="sparkles/12.jpg" alt=""/>
						<p>My favourite toy!</p>
					</div>
					<div>
						<img src="sparkles/13.jpg" alt=""/>
						<p>Besides all the running, playing and biting, I also 
						like to nap. Sometimes on my bed.......</p>
					</div>
					<div>
						<img src="sparkles/14.jpg" alt=""/>
						<p>But most of the time on my mama's bed. Keke.</p>
					</div>
					<div>
						<img src="sparkles/15.jpg" alt=""/>
						<p>After all these, I will be waiting patiently for mama 
						to come home at the end of the day.</p>
					</div>
					<div>
						<img src="sparkles/16.jpg" alt=""/>
						<p>Every night after mama is home, I will wait patiently 
						for her to feed me with all the yummy treats.<br/>
					    But sometimes she won't give me. So......</p>
					</div>
					<div>
						<img src="sparkles/17.jpg" alt=""/>
						<p>I will pester her......</p>
					</div>
					<div>
						<img src="sparkles/18.jpg" alt=""/>
						<p>Give her hints.......</p>
					</div>
					<div>
						<img src="sparkles/19.jpg" alt=""/>
						<p>If all fails, I will act cute. (Note: this works 
						most of the time!)</p>
					</div>
					<div>
						<img src="sparkles/20.jpg" alt=""/>
						<p>Treats! Treats! Treats! Yummy!</p>
					</div>
					<div>
						<img src="sparkles/21.jpg" alt=""/>
						<p>Even on my birthday, I will have a birthday cake. 
						It's very yummy! I like!</p>
					</div>
					<div>
						<img src="sparkles/22.jpg" alt=""/>
						<p>Unfortunately, there are also times when I will not 
						be feeling well.</p>
					</div>
					<div>
						<img src="sparkles/23.jpg" alt=""/>
						<p>But mama will do her best to make me well and happy 
						again. I am glad to have my mama looking after me.</p>
					</div>
					<div>
						<img src="sparkles/24.jpg" alt=""/>
					</div>
					<div>
						<p align="left">Dear Mama,</p><br/><br/>
						<p> I am sorry to have make you worry about me all the time. 
						I know there are times when I made you angry, frustrated and 
						even times when you shed tears for me.<br/><br/>
					    Mama please do not ever think that you are not good enough 
					    to take care of me. You have been taking care of me since 
					    I was a puppy. I very much love the home you have provided
						for me and I will always want you to take care of me and 
						also to be with you.<br/><br/>
						Thank you for loving and taking care of me. You will 
						always be my lovely mama.<br/><br/> 
						I LOVE YOU, MUM! *woof kiss*</p><br/><br/>
						<p align="right">Your Dearest Sparkles</p>
					</div>
<!-- Extra Section -->
					<div>
					   <p>Here are some other photos of myself and my mama in my&nbsp;
					   everyday life. Come on in and take a look!
					   Hope you are like them! *woof!</p>
					   <img src="sparkles/welcome.jpg" alt=""/>
					   <p>Let's start with my favourite...</p>
					</div>
<!-- Treats Section -->
					<div>
					   <h2 align="center">Treats!!!</h2>
					   <img src="sparkles/treat01.jpg" alt=""/>
					   <p>Let me first introduce you my favourite group of photos!
					   Got see my treats collection? My Mama will always buy these&nbsp;
					   nice nice treats for me because she knows I am a good girl.
					   <br/><br/>But Mama, I hope you will buy me more. Not enough
					   you know.&nbsp;&nbsp;*hint hint*</p>
					</div>
					<div>
                       <img src="sparkles/treat02.jpg" alt=""/>
                       <p>I still have somemore treats, but I don't know where Mama&nbsp;
                       has hidden them.</p>
                     </div> 
					<div>
                       <img src="sparkles/treat03.jpg" alt=""/>
                       <p>This is my birthday cake. I still remember the taste and&nbsp; 
                       the smell of the cake. Yummy!</p>
                     </div> 
					<div>
                       <img src="sparkles/treat04.jpg" alt=""/>
                       <p>Busy eating cake....</p>
                    </div> 
					<div>
                       <img src="sparkles/treat05.jpg" alt=""/>
                       <p>Sometimes Mama will bring fruits back home. Fruits are&nbsp;
                       nice too. They are nice-smelling, taste sweet and juicy.&nbsp;
                       Double Yummy!</p>
                    </div> 
					<div>
                       <img src="sparkles/treat06.jpg" alt=""/>
                       <p>But it is not everytime I will get to eat the fruits.&nbsp;
                       *sighz...</p>
                    </div> 
				</div>
			</div>
		</div>
		<div class="credits">
			<p>Credits:
			   Sparkles,
			   Sparkles' Mama, and 
			   <a href="http://tympanus.net/Tutorials/MoleskineNotebook/">Tympanus Tutorials</a><br/> 
			   Powered by:
			   <a href="http://jquery.com">jQuery</a>,
			   <a href="http://builtbywill.com/code/booklet/">Booklet jQuery</a>, 
			   <a href="http://code.google.com/appengine/">Google App Engine</a>, and 
			   <a href="http://en.wikipedia.org/wiki/HTML5">HTML 5</a>
			 </p>
		</div>

        <!-- The JavaScript -->

        <script type="text/javascript">
			$(function() {
				var $mybook 		= $('#mybook');
				var $bttn_next		= $('#next_page_button');
				var $bttn_prev		= $('#prev_page_button');
				var $loading		= $('#loading');
				var $mybook_images	= $mybook.find('img');
				var cnt_images		= $mybook_images.length;
				var loaded			= 0;
				//preload all the images in the book, then call the booklet plugin

				$mybook_images.each(function(){
					var $img 	= $(this);
					var source	= $img.attr('src');
					$('<img/>').load(function(){
						++loaded;
						if(loaded == cnt_images){
							$loading.hide();
							$bttn_next.show();
							$bttn_prev.show();
							$mybook.show().booklet({
								name:               null,                            // name of the booklet to display in the document title bar
								width:              800,                             // container width
								height:             500,                             // container height
								speed:              600,                             // speed of the transition between pages
								direction:          'LTR',                           // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
								startingPage:       0,                               // index of the first page to be displayed
								easing:             'easeInOutQuad',                 // easing method for complete transition
								easeIn:             'easeInQuad',                    // easing method for first half of transition
								easeOut:            'easeOutQuad',                   // easing method for second half of transition

								closed:             true,                           // start with the book "closed", will add empty pages to beginning and end of book
								closedFrontTitle:   null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
								closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
								closedBackTitle:    null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
								closedBackChapter:  null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
								covers:             false,                           // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)

								pagePadding:        10,                              // padding for each page wrapper
								pageNumbers:        true,                            // display page numbers on each page

								hovers:             false,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
								overlays:           false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
								tabs:               false,                           // adds tabs along the top of the pages
								tabWidth:           60,                              // set the width of the tabs
								tabHeight:          20,                              // set the height of the tabs
								arrows:             false,                           // adds arrows overlayed over the book edges
								cursor:             'pointer',                       // cursor css setting for side bar areas

								hash:               false,                           // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
								keyboard:           true,                            // enables navigation with arrow keys (left: previous, right: next)
								next:               $bttn_next,          			// selector for element to use as click trigger for next page
								prev:               $bttn_prev,          			// selector for element to use as click trigger for previous page

								menu:               null,                            // selector for element to use as the menu area, required for 'pageSelector'
								pageSelector:       false,                           // enables navigation with a dropdown menu of pages, requires 'menu'
								chapterSelector:    false,                           // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'

								shadows:            true,                            // display shadows on page animations
								shadowTopFwdWidth:  166,                             // shadow width for top forward anim
								shadowTopBackWidth: 166,                             // shadow width for top back anim
								shadowBtmWidth:     50,                              // shadow width for bottom shadow

								before:             function(){},                    // callback invoked before each page turn animation
								after:              function(){}                     // callback invoked after each page turn animation
							});
							Cufon.refresh();
						}
					}).attr('src',source);
				});
				
			});
			
			$(document).ready(function(){
				var age = new Date().getFullYear()-2007;
				$("#intro").text("Hello everybody, my name is Sparkles. I am a " + age + " years old Maltese.");
			});
        </script>
    </body>
</html>